<template>
  <div class="container">
    <!-- 技术分析卡片 -->
    <a-row :gutter="16" style="margin-bottom: 20px;">
      <a-col :span="24">
        <a-card :hoverable="true" class="card tech-card" title="专利技术分析">
          <a-space direction="vertical" style="width: 100%;" :size="16">
            <a-alert
              message="使用AI大模型自动识别专利技术分类"
              description="系统将调用AI大模型分析专利内容，自动识别对应的技术谱系分类并保存关联关系。"
              type="info"
              show-icon
            />
            
            <a-row :gutter="16">
              <a-col :span="6">
                <a-statistic
                  title="专利总数"
                  :value="statistics.totalPatents"
                  :value-style="{ color: '#3f8600' }"
                >
                  <template #prefix>
                    <FileTextOutlined />
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="6">
                <a-statistic
                  title="已分析"
                  :value="statistics.analyzedPatents"
                  :value-style="{ color: '#1890ff' }"
                >
                  <template #prefix>
                    <CheckCircleOutlined />
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="6">
                <a-statistic
                  title="未分析"
                  :value="statistics.unanalyzedPatents"
                  :value-style="{ color: '#cf1322' }"
                >
                  <template #prefix>
                    <ClockCircleOutlined />
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="6">
                <a-statistic
                  title="分析率"
                  :value="statistics.analyzedRate"
                  :value-style="{ color: '#722ed1' }"
                >
                  <template #prefix>
                    <PercentageOutlined />
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
            
            <a-space :size="12">
              <a-button 
                type="primary" 
                size="large" 
                :loading="analyzing"
                @click="handleAnalyzeAll"
              >
                <template #icon><ThunderboltOutlined /></template>
                批量分析所有专利
              </a-button>
              
              <a-button 
                type="default" 
                size="large"
                :loading="analyzing"
                @click="handleAnalyzeLimit"
              >
                <template #icon><ExperimentOutlined /></template>
                测试分析（1条）
              </a-button>
              
              <a-button 
                type="default" 
                size="large"
                @click="handleRefreshStatistics"
              >
                <template #icon><ReloadOutlined /></template>
                刷新统计
              </a-button>
            </a-space>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
    
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card :hoverable="true" class="card" :title="'标题 1'">
          <p>这是一个有趣的卡片组件。</p>
          <a-button type="primary">主要按钮</a-button>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card :hoverable="true" class="card" :title="'标题 2'">
          <p>这也是一个有趣的卡片组件，您可以自由添加内容。</p>
          <a-button type="dashed">虚线按钮</a-button>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card :hoverable="true" class="card" :title="'标题 3'">
          <p>尝试不同的布局，获得不同的风格。</p>
          <a-button type="link">链接按钮</a-button>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="buttons-row">
      <a-col :span="6">
        <a-button type="primary" color="success">成功按钮</a-button>
      </a-col>
      <a-col :span="6">
        <a-button type="default" color="warning">警告按钮</a-button>
      </a-col>
      <a-col :span="6">
        <a-button type="default" color="error">错误按钮</a-button>
      </a-col>
    </a-row>

    <div class="input-container">
      <a-input placeholder="请输入内容" style="width: 200px"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
  FileTextOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  PercentageOutlined,
  ThunderboltOutlined,
  ExperimentOutlined,
  ReloadOutlined,
} from '@ant-design/icons-vue';
import {
  analyzeAllPatents,
  analyzePatentsWithLimit,
  getStatistics as fetchStatistics,
} from './TechnologyAnalysis.api';
import type { AnalysisStatisticsVO, AnalysisResultVO } from './TechnologyAnalysis.data';

// 定义统计数据
const statistics = ref<AnalysisStatisticsVO>({
  totalPatents: 0,
  analyzedPatents: 0,
  unanalyzedPatents: 0,
  analyzedRate: '0.00%',
});

// 分析状态
const analyzing = ref(false);

// 获取统计信息
const loadStatistics = async () => {
  try {
    const result = await fetchStatistics();
    if (result) {
      statistics.value = result;
    }
  } catch (error) {
    console.error('获取统计信息失败:', error);
  }
};

// 批量分析所有专利
const handleAnalyzeAll = () => {
  Modal.confirm({
    title: '确认批量分析',
    content: `确定要分析所有 ${statistics.value.totalPatents} 条专利吗？此操作可能需要较长时间，期间请勿关闭页面。`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      analyzing.value = true;
      try {
        message.loading({ content: '正在分析中...', key: 'analyzing', duration: 0 });
        
        const result: AnalysisResultVO = await analyzeAllPatents();
        
        message.destroy('analyzing');
        
        if (result) {
          Modal.success({
            title: '分析完成',
            content: `
              总数：${result.totalCount} 条
              成功：${result.successCount} 条
              失败：${result.failCount} 条
              成功率：${result.successRate}
            `,
          });
          
          // 刷新统计信息
          await loadStatistics();
        }
      } catch (error: any) {
        message.destroy('analyzing');
        message.error('分析失败：' + (error.message || '未知错误'));
      } finally {
        analyzing.value = false;
      }
    },
  });
};

// 测试分析（1条）
const handleAnalyzeLimit = async () => {
  analyzing.value = true;
  try {
    message.loading({ content: '正在测试分析（1条专利）...', key: 'analyzing', duration: 0 });
    
    const result: AnalysisResultVO = await analyzePatentsWithLimit(1);
    
    message.destroy('analyzing');
    
    if (result) {
      Modal.success({
        title: '测试完成',
        content: `
          总数：${result.totalCount} 条
          成功：${result.successCount} 条
          失败：${result.failCount} 条
          成功率：${result.successRate}
        `,
      });
      
      // 刷新统计信息
      await loadStatistics();
    }
  } catch (error: any) {
    message.destroy('analyzing');
    message.error('分析失败：' + (error.message || '未知错误'));
  } finally {
    analyzing.value = false;
  }
};

// 刷新统计信息
const handleRefreshStatistics = async () => {
  message.loading({ content: '正在刷新...', key: 'refreshing', duration: 0 });
  await loadStatistics();
  message.destroy('refreshing');
  message.success('刷新成功');
};

// 页面加载时获取统计信息
onMounted(() => {
  loadStatistics();
});
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  background-color: #f4f4f4;
}

.card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.buttons-row {
  margin-top: 20px;
}

.input-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

a-button {
  width: 100%;
  margin: 10px 0;
}

a-input {
  width: 100%;
  margin-top: 10px;
}
</style>
